<template>
  <div class="chatContainer">
    <div class="chatList">
      <Add></Add>
      <el-collapse @change="handleChange">
        <el-collapse-item
          color='#ccc'
          title="广场"
          name="1"
        >
          <RoomList
            @currentRoomId='getRoomUsers'
            v-for="(item, index) in defaultRooms"
            :key="index"
            :room='item'
          ></RoomList>
        </el-collapse-item>

        <el-collapse-item
          title="我的群聊"
          name="2"
        >
          <div class="room-list">
            <RoomList
              @currentRoomId='getRoomUsers'
              v-for="(item,index) in myCreateRooms"
              :key="index"
              :room='item'
            ></RoomList>
          </div>
        </el-collapse-item>

        <el-collapse-item
          title="我加入的"
          name="3"
        >
          <div class="room-list">
            <RoomList
              @currentRoomId='getRoomUsers'
              v-for="(item,index) in myJoinRoom"
              :key="index"
              :room='item'
              :isJoinRoom='true'
            ></RoomList>
          </div>
        </el-collapse-item>

        <el-collapse-item
          title="群成员"
          name="4"
        >
          <div class="room-list">
            <UserList
              v-for="(item,index) in currentUserList"
              :key="index"
              :users='item'
            ></UserList>
          </div>
        </el-collapse-item>

      </el-collapse>

    </div>

    <div class="main-chat">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Add from "./Aside/Add";
import Chatbox from "./chatBox";
import UserList from "./Aside/UserList";
import RoomList from "./Aside/RoomList";
import { mapState } from "vuex";
import { getRoomUsersAPI } from "@/api/socket";
export default {
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      currentUserList: [],
      options: {
        list: [
          {
            id: 0,
            name: "addFriend",
            text: "添加好友",
            bgcolor: "#a1c9db",
            icon: '<svg t="1679896973891" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3609" width="48" height="48"><path d="M767.420235 548.381113m0.072606 31.999918l0.726056 319.999176q0.072606 31.999918-31.927312 32.072523l0 0q-31.999918 0.072606-32.072523-31.927312l-0.726056-319.999176q-0.072606-31.999918 31.927312-32.072523l0 0q31.999918-0.072606 32.072523 31.927312Z" fill="#ffffff" p-id="3610"></path><path d="M927.837469 772.012308m-31.999918 0.072606l-319.999176 0.726056q-31.999918 0.072606-32.072523-31.927312l0 0q-0.072606-31.999918 31.927312-32.072523l319.999176-0.726057q31.999918-0.072606 32.072523 31.927312l0 0q0.072606 31.999918-31.927312 32.072524Z" fill="#ffffff" p-id="3611"></path><path d="M500.266667 143.573333a181.333333 181.333333 0 0 1 0.373333 362.666667h-0.426667a181.333333 181.333333 0 0 1-0.373333-362.666667h0.426667m0-64h-0.586667a245.333333 245.333333 0 0 0 0.533333 490.666667h0.533334a245.333333 245.333333 0 0 0-0.48-490.666667zM96.042667 912.474667l64-0.149334a32 32 0 0 1-31.925334 32.074667 32 32 0 0 1-32.074666-31.925333z" fill="#ffffff" p-id="3612"></path><path d="M500.64 506.24A405.333333 405.333333 0 0 0 96 912.48h64a341.706667 341.706667 0 0 1 340.533333-342.08z" fill="#ffffff" p-id="3613"></path></svg>',
          },
          {
            id: 1,
            name: "addGroup",
            text: "加入群聊",
            bgcolor: "#ffce61",
            icon: '<svg t="1679897145952" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5396" width="48" height="48"><path d="M443.702957 499.059954A241.781503 241.781503 0 0 1 404.818509 411.819205a411.277814 411.277814 0 0 0-398.81485 411.277814 41.875559 41.875559 0 0 0 84.249637 0 327.028177 327.028177 0 0 1 327.028177-327.028177z m199.407425-19.940743a121.638529 121.638529 0 1 1 121.638529-121.638529 121.638529 121.638529 0 0 1-123.134085 119.644455z m205.888166-121.638529a205.888166 205.888166 0 1 0-205.389647 205.888166 205.888166 205.888166 0 0 0 203.894092-207.383722z m128.617789 439.194853h-104.688898v-104.190379a42.374078 42.374078 0 1 0-84.249637 0v102.694824h-102.694824a42.374078 42.374078 0 1 0 0 84.249637h102.694824v102.694824a42.374078 42.374078 0 0 0 84.249637 0v-102.694824h102.694824a42.374078 42.374078 0 0 0 0-84.249637z m-154.540754-192.428165A411.277814 411.277814 0 0 0 230.337012 972.652588a41.875559 41.875559 0 0 0 84.249637 0 327.028177 327.028177 0 0 1 327.028177-327.028177 331.016326 331.016326 0 0 1 65.804451 6.480741 260.725208 260.725208 0 0 1 113.662232-49.353337zM404.818509 411.320687a244.772614 244.772614 0 0 1-4.486667-84.748156 121.638529 121.638529 0 1 1 121.638529-182.457794A239.787429 239.787429 0 0 1 604.225934 116.197698a205.888166 205.888166 0 1 0-199.407425 295.122989z" fill="#ffffff" p-id="5397"></path></svg>',
          },
          {
            id: 2,
            name: "createGroup",
            text: "创建群聊",
            bgcolor: "#22245d",
            icon: '<svg t="1679897042638" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4970" width="48" height="48"><path d="M694.445 406.059H547.641V260.478c0-19.489-15.991-35.346-35.641-35.346-19.654 0-35.641 15.858-35.641 35.346v145.581H329.552c-19.651 0-35.641 15.858-35.641 35.344 0 19.489 15.991 35.346 35.641 35.346h146.807v145.584c0 19.486 15.988 35.344 35.641 35.344 19.651 0 35.641-15.858 35.641-35.344V476.749h146.804c19.654 0 35.641-15.858 35.641-35.346 0.001-19.487-15.987-35.344-35.641-35.344z" p-id="4971" fill="#ffffff"></path><path d="M744.143 63.944H279.857c-111.142 0-201.567 89.578-201.567 199.679v365.165c0 110.101 90.309 199.679 201.31 199.679h85.221l98.702 114.808c1.891 2.2 3.995 4.085 6.201 5.771 0.361 0.376 0.636 0.812 1.015 1.174 6.676 6.34 15.436 9.836 24.681 9.836 9.801 0 18.931-3.886 25.699-10.868l116.82-120.72h106.25c111.119 0 201.521-89.578 201.521-199.679V263.623c0-110.101-90.425-199.679-201.567-199.679z m130.281 564.845c0 71.104-58.42 128.969-130.235 128.969H622.758c-9.662 0-19.026 3.975-25.725 10.87l-101.602 104.99-107.667-116.835-61.115 0.974H279.6c-71.696 0-130.027-57.865-130.027-128.969V263.623c0-71.101 58.443-128.966 130.284-128.966h464.286c71.838 0 130.281 57.865 130.281 128.966v365.166z" p-id="4972" fill="#ffffff"></path></svg>',
          },
        ],
      },
      currentComponent: {
        name: "addFriend",
        title: "添加好友",
      },
    };
  },

  components: {
    Add,
    Chatbox,
    UserList,
    RoomList,
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    //打开内层对话框
    showDialog(val) {
      showInnerDialog.value = true;
      currentComponent.name = val.name;
      currentComponent.title = val.text;
    },
    toChat() {
      console.log("jjijj");
      this.$router.push("/my/chat/chatbox");
    },

    // 接收到子组件传来的rooId ,触发事件获取当前所在房间的用户们
    async getRoomUsers(roomId) {
      this.currentUserList = [];
      console.log("--------传来的房间ID", roomId);
      const res = await getRoomUsersAPI(roomId);
      const myself = {
        username: this.$store.state.users.userInfo.username,
        user_id: this.$store.state.users.userInfo.id,
        user_pic: this.$store.state.users.userInfo.user_pic,
      };
      if (res.status == 0) {
        this.currentUserList = res.data;
        // this.currentUserList.push(myself);
      }

      console.log("获取到的userList", this.currentUserList);
    },
  },
  computed: {
    ...mapState({
      defaultRooms: (state) => state.chat.defaultRoom,
    }),
    ...mapState({
      myCreateRooms: (state) => state.chat.myRoomList,
    }),
    ...mapState({
      myJoinRoom: (state) => state.chat.myJoinRoom,
    }),
  },
  mounted() {
    this.$store.dispatch("getDefaultRoom");
    this.$store.dispatch("getMyRoomList");
    // 获取我的群聊---我加入的
    this.$store.dispatch("getMyJoinRoom", 0);
    this.currentUserList = [];
    console.log("1111", this.currentRoom);

    this.$bus.$on("hasUserLeave", (roomId) => {
      this.getRoomUsers(roomId);
    });

    this.$socket.on("deleteUser", () => {
      console.log("触发了解释触发了解释------");
      this.$message.error("你已被踢出群聊");
      setTimeout(() => {
        this.$router.push("/my/chat/info");
        this.$store.dispatch("getMyJoinRoom", 0);
        this.$store.dispatch("initCurrentRoomInfo", {});
        this.currentUserList = [];
      }, 500);
    });

    this.$socket.on("joinRoom", (roomId) => {
      console.log("有人进入了啊jjjj");
      getRoomUsersAPI(roomId);
    });
    this.$socket.on("deleteRoom", (msg) => {
      console.log("-----触发解散");
      this.$message(msg);
      this.$router.push("/my/chat/info");
      this.$store.dispatch("getMyJoinRoom", 0);
      this.$store.dispatch("initCurrentRoomInfo", {});
      this.currentUserList = [];
    });
    this.$socket.on("leaveRoom", (roomId) => {
      this.$bus.$emit("hasUserLeave", roomId);
    });
    this.$bus.$on("initCurrentUsesList", () => {
      console.log("---触发了全局事件解散");
      this.$router.push("/my/chat/info");
      this.$store.dispatch("getMyJoinRoom", 0);
      this.$store.dispatch("initCurrentRoomInfo", {});
      this.currentUserList = [];
    });

    this.$bus.$on("deleteUserAfterInit", async (roomId) => {
      await this.$store.dispatch("getMyJoinRoom", 0);
      this.getRoomUsers(roomId);
      console.log("触发了-------自己的");
    });
    this.$socket.on("delUser", (roomId) => {
      console.log("触发了删除的用户后的信息更新");
      this.getRoomUsers(roomId);
    });
  },
};
</script>


<style lang="less" scoped>
.chatContainer {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;

  background-color: rgb(137, 176, 248);
}
.chatList {
  display: flex;
  width: 18%;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  background-color: #93a6dfc3;
  flex-direction: column;
}
.main-chat {
  display: flex;
  width: 90%;
  height: 100%;
  overflow: hidden;
  background-color: #f9f9f9;
  justify-content: center;

  align-items: center;
}
::v-deep .el-collapse {
  width: 100%;
  height: 100%;
  background-color: #8abbd5;
}
::v-deep .el-collapse-item__header {
  padding-left: 10px;
  background-color: #90a8e5;
  color: #e1e1f1;
  font-size: 1.1em;
}

::v-deep .el-collapse-item__content {
  padding: 0;
}
::v-deep .el-collapse-item {
  background-color: #7272ff;
}
</style>